<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>谷粒学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐</title>
    <meta name="keywords" content="谷粒学院,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频"/>
    <meta name="description"
          content="谷粒学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/web.css">
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        @keyframes move {
            0% {
                background-position: 0 0;
            }
            100% {
                /*宽度固定，如果为百分比背景不会滚动*/
                background-position: -300px 0;
            }
        }

        .wrap {
            /*设置背景渐变色*/
            background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
            /*chrome私有样式，加前缀，文字显示背景图片*/
            -webkit-background-clip: text;
            animation: move 5s infinite;
            /*文字颜色设为透明*/
            color: transparent;
            /*宽度固定*/
            width: 500px;
        }
    </style>
</head>

<body class="W-body">
<div class="in-wrap" id="app">

    <!-- 公共头引入 -->
    <header id="header">
        <section class="container">
            <h1 id="logo">
                <a href="#" title="谷粒学院">
                    <img src="img/logo.png" width="100%" alt="谷粒学院">
                </a>
            </h1>
            <div class="h-r-nsl">
                <ul class="nav">
                    <li><a href="index.html" title="首页">首页</a></li>
                    <li><a href="course.html" title="课程">课程</a></li>
                    <li><a href="teacher.html" title="名师">名师</a></li>
                    <li><a href="article.html" title="文章">学习地图</a></li>
                    <li class="current"><a href="exam.html" title="考试">考试</a></li>
                </ul>
                <!-- / nav -->
                <ul class="h-r-login">
                    <li id="no-login">
                        <a href="login.html" title="登录">
                            <em class="icon18 login-icon">&nbsp;</em><span class="vam ml5">登录</span>
                        </a>
                        |
                        <a href="register.html" title="注册">
                            <span class="vam ml5">注册</span>
                        </a>
                    </li>
                    <li class="mr10 undis" id="is-login-one">
                        <a href="#" title="消息" id="headerMsgCountId">
                            <em class="icon18 news-icon">&nbsp;</em>
                        </a><q class="red-point" style="display: none">&nbsp;</q>
                    </li>
                    <li class="h-r-user undis" id="is-login-two">
                        <a href="#" title="">
                            <img src="img/avatar-boy.gif" width="30" height="30" class="vam picImg" alt="">
                            <span class="vam disIb" id="userName"></span>
                        </a>
                        <a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a></li>
                    <!-- /未登录显示第1 li；登录后显示第2，3 li -->
                </ul>
                <aside class="h-r-search">
                    <form action="#" method="post">
                        <label class="h-r-s-box">
                            <input type="text" placeholder="搜索课程" name="queryCourse.courseName" value="">
                            <button type="submit" class="s-btn">
                                <em class="icon18">&nbsp;</em>
                            </button>
                        </label>
                    </form>
                </aside>
            </div>
            <aside class="mw-nav-btn">
                <div class="mw-nav-icon"></div>
            </aside>
            <div class="clear"></div>
        </section>
    </header>
    <div class="container">
        <div style="margin-top: 20px;margin-left: 50%;margin-bottom: 280px;">
            <button v-if="status==0" class="btn btn-success" @click="beautiful()">申请考试</button>
            <button v-if="status==1" class="btn btn-success" @click="examTest()">进入考试</button>
            <button v-if="status==2" class="btn btn-success" @click="examTests()">考试正在进行中，请抓紧时间进入继续考试</button>
            <label v-if="status==3" class="wrap" style="font-size: 20px;">考试已结束</label>
            <button v-if="status==3" class="btn btn-success" @click="examAnswer()">查看试卷</button>
        </div>

    </div>

    <!-- 公共底引入 -->
    <footer id="footer">
        <section class="container">
            <div class="">
                <h4 class="hLh30">
                    <span class="fsize18 f-fM c-999">友情链接</span>
                </h4>
                <ul class="of flink-list">
                    <li><a href="http://www.atguigu.com/" title="尚硅谷" target="_blank">尚硅谷</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="b-foot">
                <section class="fl col-7">
                    <section class="mr20">
                        <section class="b-f-link">
                            <a href="#" title="关于我们" target="_blank">关于我们</a>|
                            <a href="#" title="联系我们" target="_blank">联系我们</a>|
                            <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                            <a href="#" title="资源下载" target="_blank">资源下载</a>|
                            <span>服务热线：010-56253825</span> <span>Email：info@atguigu.com</span>
                        </section>
                        <section class="b-f-link mt10">
                            <span>©2020课程版权均归谷粒学院所有 京ICP备19006131号</span>
                        </section>
                    </section>
                </section>
                <aside class="fl col-3 tac mt15">
                    <section class="gf-tx">
                        <span><img src="img/wx-icon.png" alt=""></span>
                    </section>
                    <section class="gf-tx">
                        <span><img src="img/wb-icon.png" alt=""></span>
                    </section>
                </aside>
                <div class="clear"></div>
            </div>
        </section>
    </footer>
    <!-- 公共底引入 -->
</div>
<script>
    var app = new Vue({
        el: "#app", //创建vue对象，名字叫做app，该对象与id为app的标签进行绑定，绑定之后就可以通过vue对象操作app内部的所有标签
        data: {
            paperId: 4,
            status: ""
        },
        mounted() {
            axios.get("/findSatusByExamIdAndUserId/" + this.paperId)
                .then(res => {
                    console.info(res.data.data);
                    if (res.data.data == null) {
                        this.status = 0;
                    } else {
                        this.status = res.data.data.status;
                    }

                });
        },
        methods: {
            beautiful: function () {
                axios.post("/insertByExamIdAndUserId/" + this.paperId)
                    .then(res => {
                        console.info(res.data);
                        if (res.data.code == 200) {
                            axios.get("/findSatusByExamIdAndUserId/" + this.paperId)
                                .then(res => {
                                    console.info(res.data.data);
                                    this.status = res.data.data.status;
                                    console.log(this.status);
                                });
                        }
                    });
            },
            examTest: function () {
                axios.post("/updateStatu/" + this.paperId)
                    .then(res => {
                        if (res.data.code == 200) {
                            window.location.href = "examtest.html";
                        }
                    });
            },
            examTests: function () {
                window.location.href = "examtest.html";
            },
            examAnswer: function () {
                window.location.href = "examanswer.html";
            }
        }
    })
</script>
</body>

</html>
